<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            width: 200px;
        }

        .fly{
            word-wrap : break-word;
        }
        .moon{
            width: 200px;
            height: 150px;
            overflow: hidden;
        }
        /*【1】当所有英文都是由单个字母全连接着的时候，而不是有单词组成。盒子即便限定*/
        /*了宽度，也不会自动换行。设置了word-wrap为break-word后可以*/
    </style>
</head>
<body>
<p class="sky">
    this is a find out this is a find outthis is a find outthis is a find outthis is a find outthis is a find out
</p>
<p class="moon">
    汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别
    汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别
    汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别
    汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别汉语演示和英文的区别
</p>
<p class="fly">
    moonskyskyskyskyskyskyskyskyskyskyskyskyskyskyskys
    <!--kyskyskyskyskyskysk<span>paddingkyskyskyskyskyskyskyskyskyskyskyskykyskyskyskyskyskyskyskysky-->
    <!--skyskyskykyskyskyskyskyskyskyskyskykyskyskyskyskyskyskysky-->
    <!--kyskyskyskyskyskyskyskyskyskyskyskykyskyskyskyskyskyskyskysky-->
    <!--skyskyskykyskyskyskyskyskyskyskyskypadding</span>-->
    yskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskyskysky
</p>
</body>
</html>